
<!doctype html>
<html lang="zxx">

<script type="text/javascript" src="./js/shop.js"></script>
<style>
 * {
     margin: 0;
     padding: 0;
 }

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #666;
}

body {
    background: #fff;
    color: #666;
    font-size: 14px;
}

input {
    outline: none;
}

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.clearfix {
    *zoom: 1;
    //当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了
}


table {
    width: 1200px;
    margin: 0 auto;
    border-collapse: collapse;
}

th {
    font: normal 14px/50px '宋体';
    color: #666;
}

th,
td {
    border: none;
    text-align: center;
    border-bottom: 1px dashed #ccc;
}

input[type='checkbox'] {
    width: 13px;
    height: 13px;
}

tbody p {
    position: relative;
    bottom: 10px;
}

tbody .add,
tbody .reduce {
    float: left;
    width: 22px;
    height: 22px;
    border: 1px solid #ccc;
    text-align: center;
    background: none;
    outline: none;
    cursor: pointer;
}

tbody input[type='text'] {
    width: 50px;
    float: left;
    height: 18px;
    text-align: center;
}

tbody .count-c {
    width: 98px;
    margin: 0 auto;
}

/*    button[disabled] {
      color: #ddd;
      cursor: not-allowed;
    } */

tbody tr:hover {
    background: #eee;
}

tbody tr.active {
    background: rgba(241, 209, 149, 0.945);
}

.controls {
    width: 1200px;
    margin: 10px auto;
    border: 1px solid #ccc;
    line-height: 50px;
    padding-left: 10px;
    position: relative;
}

.controls .del-all,
.controls .clear {
    float: left;
    margin-right: 50px;
}

.controls p {
    float: right;
    margin-right: 100px;
}

.controls span {
    color: red;
}

.controls .pay {
    position: absolute;
    right: 0;
    width: 80px;
    height: 54px;
    background: red;
    font: bold 20px/54px '宋体';
    color: #fff;
    text-align: center;
    bottom: -1px;
}

.controls .total-price {
    font-weight: bold;
}
</style>

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>关于</title>
    <!-- Template CSS -->
    <link rel="stylesheet" href="../css/style-starter.css">
    <link rel="stylesheet" href="/css/layui.css"  media="all">

    <!-- Template CSS -->
    <link href="http://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,600&display=swap"
          rel="stylesheet">
    <!-- Template CSS -->
</head>

<body>
<!-- header -->
<header id="site-header" class="w3l-header fixed-top">
    <nav class="navbar navbar-expand-lg navbar-light fill px-lg-0 py-0 px-3">
        <div class="container">
            <h1><a class="navbar-brand" href="index.html">
                <span class="fa fa-play icon-log" aria-hidden="true"></span>
                Panda熊猫影城<img src="/images/xm.jpeg"width="70" height="70">
            </a>
            </h1>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">主页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.html">关于</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="genre.html">电影</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="order.html">订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Login.html">登录</a>
                    </li>
                </ul>

                <div class="search-right">
                    <input id="movieName"  type="search" placeholder="请输入要搜索的电影信息" name="search" required="required" autofocus="">
                    <button type="submit" class="btn" onclick="SearchMovie()">
                        <span class="fa fa-search" ria-hidden="true"></span>
                    </button>
                </div>
            </div>

            <div class="mobile-position">
                <nav class="navigation">
                    <div class="theme-switch-wrapper">
                        <label class="theme-switch" for="checkbox">
                            <input type="checkbox" id="checkbox">
                            <div class="mode-container">
                                <i class="gg-sun"></i>
                                <i class="gg-moon"></i>
                            </div>
                        </label>
                    </div>
                </nav>
            </div>
        </div>
    </nav>
</header>
<!-- //header -->
<!--/breadcrumbs -->
<div class="w3l-breadcrumbs">
    <nav id="breadcrumbs" class="breadcrumbs">
        <div class="container page-wrapper">
            <a href="index.html">主页</a> » <span class="breadcrumb_last" aria-current="page">订单</span>
        </div>
    </nav>
</div>





<div class="orders">
    <table id="orderstable" class="layui-table" lay-filter="demo">
    </table>

    <script type="text/html" id="operationTpl">
        <button class="layui-btn layui-btn-xs" lay-event="modify">修改</button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    </script>

    <div class="controls clearfix">
        <a href="javascript:" class="del-all" id="deleteAll">删除所选商品</a>
        <a href="javascript:" class="clear">清理购物车</a>
        <a href="javascript:" class="pay">去结算</a>
        <p>
            已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0</span>
        </p>
    </div>
</div>


<!-- footer-66 -->
<footer class="w3l-footer">
    <section class="footer-inner-main">
        <div class="footer-hny-grids py-5">
            <div class="container py-lg-4">
                <div class="text-txt">
                    <div class="right-side">
                        <div class="row footer-about">
                            <div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
                                <a href="genre.html"><img class="img-fluid" src="../images/banner1.jpg"
                                                          alt=""></a>
                            </div>
                            <div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
                                <a href="genre.html"><img class="img-fluid" src="../images/banner2.jpg"
                                                          alt=""></a>
                            </div>
                            <div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
                                <a href="genre.html"><img class="img-fluid" src="../images/banner3.jpg"
                                                          alt=""></a>
                            </div>
                            <div class="col-md-3 col-6 footer-img mb-lg-0 mb-4">
                                <a href="genre.html"><img class="img-fluid" src="../images/banner4.jpg"
                                                          alt=""></a>
                            </div>
                        </div>
                        <div class="row footer-links">


                            <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                                <h6>电影</h6>
                                <ul>
                                    <li><a href="#">热映电影</a></li>
                                    <li><a href="#">热搜视频</a></li>
                                    <li><a href="#">英文电影</a></li>
                                    <li><a href="#">影视剪辑</a></li>
                                    <li><a href="#">即将上映</a></li>
                                    <li><a href="contact.html">联系我们</a></li>
                                </ul>
                            </div>
                            <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                                <h6>资讯</h6>
                                <ul>
                                    <li><a href="index.html">主页</a> </li>
                                    <li><a href="about.html">关于</a> </li>
                                    <li><a href="#">电视</a> </li>
                                    <li><a href="#">博客</a> </li>
                                    <li><a href="#">登录</a></li>
                                    <li><a href="contact.html">联系</a></li>
                                </ul>
                            </div>
                            <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                                <h6>位置</h6>
                                <ul>
                                    <li><a href="genre.html">亚洲</a></li>
                                    <li><a href="genre.html">法国</a></li>
                                    <li><a href="genre.html">中国</a></li>
                                    <li><a href="genre.html">美国</a></li>
                                    <li><a href="genre.html">韩国</a></li>
                                    <li><a href="genre.html">英国</a></li>
                                </ul>
                            </div>
                            <div class="col-md-3 col-sm-6 sub-two-right mt-5">
                                <h6>通讯</h6>
                                <form action="#" class="subscribe mb-3" method="post">
                                    <input type="email" name="email" placeholder="Email" required="">
                                    <button><span class="fa fa-envelope-o"></span></button>
                                </form>
                                <p>输入邮箱来接收来自我们的最新资讯.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="below-section">
            <div class="container">
                <div class="copyright-footer">
                    <div class="columns text-lg-left">
                        <p>Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                    </div>

                    <ul class="social text-lg-right">
                        <li><a href="#facebook"><span class="fa fa-facebook" aria-hidden="true"></span></a>
                        </li>
                        <li><a href="#linkedin"><span class="fa fa-linkedin" aria-hidden="true"></span></a>
                        </li>
                        <li><a href="#twitter"><span class="fa fa-twitter" aria-hidden="true"></span></a>
                        </li>
                        <li><a href="#google"><span class="fa fa-google-plus" aria-hidden="true"></span></a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- copyright -->
        <!-- move top -->
        <button onclick="topFunction()" id="movetop" title="Go to top">
            <span class="fa fa-arrow-up" aria-hidden="true"></span>
        </button>
        <script>
            // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function () {
                scrollFunction()
            };

            function scrollFunction() {
                if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                    document.getElementById("movetop").style.display = "block";
                } else {
                    document.getElementById("movetop").style.display = "none";
                }
            }

            // When the user clicks on the button, scroll to the top of the document
            function topFunction() {
                document.body.scrollTop = 0;
                document.documentElement.scrollTop = 0;
            }
        </script>
        <!-- /move top -->

    </section>
</footer>
<!--//footer-66 -->
</body>

</html>

<script src="/js/layui.js"></script>
<script type="text/javascript" src="/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
    layui.use(['form','table'],function() {
        //调用 layui 封装的方法
        var table = layui.table;
        const dropdown = layui.dropdown;
        var $ = layui.jquery;
        const layer = layui.layer;

        table.render({           //执行渲染
            elem: '#orderstable',         //指定原始表格元素选择器（推荐id选择器）
            url: 'http://localhost:8081/orders/all',     //请求地址
            height: 820,
            page:true,
            //自定义高度
            loading: false,      //是否显示加载条（默认 true）
            cols: [[
                {type:'checkbox'},//设置表头 field是数据库的字段名，title是显示在页面中的值
                {field: 'id', title: 'id', width: 180,align:'center'},
                {field: 'orderid', title: '用户id', width: 180,align:'center'},
                {field: 'num', title: '票数', width: 180,align:'center'},
                {field: 'price', title: '价格', width: 180,align:'center'},
                {field: 'name', title: '电影名称', width: 180,align:'center'},
                {field: 'shoutime', title: '上映时间', width: 180,align:'center'},
                {field: 'operation', title: '操作',  templet: '#operationTpl', align: "center"}
                //#toolbar是工具栏的id
            ]]
        });

        //操作栏事件
        layui.table.on("tool(demo)",function (obj){
            var data = obj.data;
            let layEvent=obj.event;
            let tr = obj.tr;
            let customerId = data["id"];

            if (layEvent === 'delete'){
                console.log("id:"+data.id);
                layer.confirm("确认删除？",{icon:2,title:'警告'},function (index){
                    console.log("id:"+data.id);
                    $.ajax({
                        url: 'http://localhost:8081/orders/'+data.id,
                        type: 'DELETE',
                        success: function (res){
                            layer.alert("删除成功",{icon: 1},function (index){
                                location.reload();
                            });
                        }
                    });
                    //关闭确认框
                    layer.close(index);
                });

            }

        });


    })


// //在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
//     table.on('tool(tb)', function (obj) {//obj是指这张表中的数据
//     row = obj.data;//将这张表中的数据赋给row这个变量
//     //obj.event：获取触发事件的元素的 event 值，用于区分不同的操作
//     if (obj.event == "edit") {//如果这个值等于edit，那么调用open("编辑");
//     open("编辑");
//     }else if(obj.event == "del"){//如果这个值等于del，那么跳到user.action调用删除的方法
//     layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
//     $.post('user.action?methodName=del&id='+row.id,{
//     },function(del){
//     if(rs.success){
//     //调用查询方法刷新数据
//     select();
//     }else{
//     layer.msg(rs.msg,function(){});
//     }
//     },'json');
//     layer.close(index);
//     });
//     }else{
//
//     }
//     });

</script>
<script src="../js/jquery-3.3.1.min.js"></script>
<!-- stats -->
<script src="../js/jquery.waypoints.min.js"></script>
<script src="../js/jquery.countup.js"></script>
<script>
    $('.counter').countUp();
</script>
<!-- //stats -->
<!--/theme-change-->
<script src="../js/theme-change.js"></script>
<!-- //theme-change-->
<script src="../js/owl.carousel.js"></script>
<!-- script for banner slider-->
<script>
    $(document).ready(function () {
        $('.owl-team').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            responsiveClass: true,
            autoplay: false,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: false,
            responsive: {
                0: {
                    items:2,
                    nav: false
                },
                480: {
                    items: 2,
                    nav: true
                },
                667: {
                    items: 3,
                    nav: true
                },
                1000: {
                    items:4,
                    nav: true
                }
            }
        })
    })
</script>
<script>
    $(document).ready(function () {
        $('.owl-three').owlCarousel({
            loop: true,
            margin: 20,
            nav: false,
            responsiveClass: true,
            autoplay:true,
            autoplayTimeout: 5000,
            autoplaySpeed: 1000,
            autoplayHoverPause: false,
            responsive: {
                0: {
                    items: 2,
                    nav: false
                },
                480: {
                    items: 2,
                    nav: true
                },
                667: {
                    items: 3,
                    nav: true
                },
                1000: {
                    items: 6,
                    nav: true
                }
            }
        })
    })
</script>
<!-- //script -->
<!-- for tesimonials carousel slider -->
<script>
    $(document).ready(function () {
        $(".owl-clients").owlCarousel({
            loop: true,
            margin:40,
            responsiveClass: true,
            responsive: {
                0: {
                    items:1,
                    nav: true
                },
                736: {
                    items: 2,
                    nav: false
                },
                1000: {
                    items:3,
                    nav: true,
                    loop: false
                }
            }
        })
    })
</script>
<!-- //script -->
<!-- script for owlcarousel -->
<!-- disable body scroll which navbar is in active -->
<script>
    $(function () {
        $('.navbar-toggler').click(function () {
            $('body').toggleClass('noscroll');
        })
    });
</script>
<!-- disable body scroll which navbar is in active -->

<!--/MENU-JS-->
<script>
    $(window).on("scroll", function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 80) {
            $("#site-header").addClass("nav-fixed");
        } else {
            $("#site-header").removeClass("nav-fixed");
        }
    });

    //Main navigation Active Class Add Remove
    $(".navbar-toggler").on("click", function () {
        $("header").toggleClass("active");
    });
    $(document).on("ready", function () {
        if ($(window).width() > 991) {
            $("header").removeClass("active");
        }
        $(window).on("resize", function () {
            if ($(window).width() > 991) {
                $("header").removeClass("active");
            }
        });
    });
</script>
<!--//MENU-JS-->
<script src="../js/bootstrap.min.js"></script>